<template>
	<view class="honor" v-if="!loadding">
		<view class="con" v-if="honorData&&honorData.length>0" >
			<view class="item" v-for="(item, index) in honorData" :key="index">
				<image mode="widthFix" class="img" :class="'canvasimg'+index" :src="item.certInfo.image[0].file_path" @load="imageload" />
				<!-- <button class="btn-green btn" @click="beenReached(item,'.canvasimg'+index)" >立即领取11</button> -->
				<view class="control" v-if="isimgshowdata">
					<view class="name">{{item.name}}</view>
					<button class="btn-gcred btn-gray-border btn" @click="notReached(item.grade_id,item.remark)" v-if="item.certInfo.can_receive==0&&item.certInfo.is_receive==0">立即领取</button>
					<button class="btn-green btn" @click="beenReached(item,'.canvasimg'+index)" v-if="item.certInfo.can_receive!=0&&item.certInfo.is_receive==0">立即领取</button>
					<button class="btn-blue btn" @click="haveReached(item.grade_id)" v-if="item.certInfo.is_receive!=0">查看证书</button>
				</view>
				<view class="control" v-else>
					<view class="name">{{item.name}}</view>
					<button class="btn-gcred btn-gray-border btn">图片加载中...</button>
				</view>
			</view>
		</view>
		<view class=" empty d-c-c p30" v-else>
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
		<view class="canvasprop" v-show="isshow">
			<view class="con_in">
				<view class="con_img">
					<image mode="widthFix" class="img" :src="imgs" />
					<canvas class="canvas" v-show="canvasbool" canvas-id="myCanvas" :style="{ width: canvasWidth +'px', height: canvasHeight +'px' }"></canvas>
				</view>
				<view class="bottom">
					<button class="btn-blue btn" @click="savePosterImg(imgs)">下载</button>
					<button class="btn-gcred btn-gray-border btn" @click="closeprop">关闭</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				/*是否加载完成*/
				loadding: false,
				canvasbool:true,
				//荣誉数据
				honorData:[],
				showCertData:'',
				receiveData:'',
				isshow: false,
				canvasWidth: 390, //画布宽度
				canvasHeight: 550, //画布高度
				imgs: '',
				context:'',
				isimgshowdata:false,
				itemclass:''
			}
		},
		mounted() {
		    const ctx = uni.createCanvasContext('myCanvas', this);
		    this.context = ctx;
		},
		computed: {

		},
		onLoad() {
			
		},
		onShow: function() {
			uni.showLoading({
				title: '加载中'
			});
			this.getData();
		},
		methods: {
			/*获取数据*/
			getData() {
				let self = this;
				let dataType = self.dataType;
				self._get('user.user/gradeCertList', {source:'wx'}, function(res) {
					self.honorData = res.data;
					self.loadding = false;
					uni.hideLoading();
				});
			},
			
			//积分未达到
			notReached(product_id,name) {
				uni.showModal({
					content:name,
					showCancel:false
				})
			},
			imageload(e){
				this.isimgshowdata=true;
			},
			closeprop(){
				let self = this;
				self.clear();
				self.isshow=false;
			},
			
			//查看图片
			haveReached(id) {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('user.user/showCert', {
					grade_id: id,
					source:'h5'
				}, (res) => {
					uni.hideLoading();
					self.showCertData=res.data;
					console.log(res)
					if(res.data && res.data.image){
						// self.savePosterImg(res.data.image);
						self.isshow=true;
						self.imgs = res.data.image;
						self.canvasbool=false;
					}else{
						uni.showModal({
							content:'暂无数据',
							showCancel:false
						})
					}
					
				});
			},
			//保存海报图片
			savePosterImg(img) {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				// 下载海报图片
				uni.downloadFile({
					url: img,
					success(res) {
						uni.hideLoading();
						// 图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(data) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
							},
							fail(err) {
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showToast({
										title: '请允许访问相册后重试',
										icon: 'none',
										duration: 1000
									});
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							},
							complete(res) {
								console.log('complete');
							}
						});
					}
				});
			},
			
			//积分达到
			beenReached(data,classname) {
				let self = this;
				self.clear();
				const query = uni.createSelectorQuery();
				self.itemclass=classname;
				//获取宽度
				query.select(classname).fields({
					size: true
				}, (res) => {
					// const width = res.width;
					// const height = res.height;
					// self.canvasWidth=width;
					// self.canvasHeight=height;
					if(data){
						uni.showLoading({
							title: '提交中...'
						});
						self.receiveData=data;
						self.downImgUrl(data);
					}else{
						uni.showModal({
							content:'暂无数据',
							showCancel:false
						})
					}
				}).exec();
			},
			downImgUrl() {
				let self = this
				uni.getImageInfo({
					src: self.receiveData.certInfo.image[0].file_path,
					success: function(res) {
						self.receiveData.certInfo.image[0].file_path = res.path;
						self.isshow=true;
						setTimeout(()=>{
							self.drawPageImg();
						},1000)
					}
				});

			},
			ctxText(ctx, textFont, textAlign, textFillStyle, textName, x, y) {
				// ctx.beginPath()
				// ctx.save() //保存状态
				//字体
				ctx.font = textFont,
				//字体样式
				ctx.textAlign = textAlign
				//字体颜色
				ctx.fillStyle = textFillStyle
				//填充字体
				ctx.fillText(textName, x, y)
			},
			
			// 使用画布绘制页面
			drawPageImg() {
				let self = this;
				let ctx = self.context;
				// 绘制背景
				ctx.fillStyle = '#fff';
				ctx.fillRect(0, 0, self.canvasWidth, self.canvasHeight);
				const fontbig = Math.round(Number(self.receiveData.certInfo.size)/1.2)+'px bold '+ 
				(self.receiveData.certInfo.font==1?'simhei'
				:self.receiveData.certInfo.font==2?'kaiti'
				:self.receiveData.certInfo.font==3?'songti'
				:self.receiveData.certInfo.font==4?'FZCHS'
				:self.receiveData.certInfo.font==5?'huawenxingkai'
				:self.receiveData.certInfo.font==6?'HWKT'
				:self.receiveData.certInfo.font==7?'HWHP'
				:self.receiveData.certInfo.font==8?'HWFS'
				:'HWFS');
				const font = Math.round(Number(self.receiveData.certInfo.size)/2)+'px '+
				(self.receiveData.certInfo.font==1?'simhei'
				:self.receiveData.certInfo.font==2?'kaiti'
				:self.receiveData.certInfo.font==3?'songti'
				:self.receiveData.certInfo.font==4?'FZCHS'
				:self.receiveData.certInfo.font==5?'huawenxingkai'
				:self.receiveData.certInfo.font==6?'HWKT'
				:self.receiveData.certInfo.font==7?'HWHP'
				:self.receiveData.certInfo.font==8?'HWFS'
				:'HWFS');
				console.log(fontbig);
				// 背景图
				ctx.drawImage(self.receiveData.certInfo.image[0].file_path, //图像资源
					0,//图像的左上角在目标canvas上 X 轴的位置
					0,//图像的左上角在目标canvas上 Y 轴的位置
					self.canvasWidth,//在目标画布上绘制图像的宽度
					self.canvasHeight//在目标画布上绘制图像的高度
				)
				ctx.fillStyle = self.receiveData.certInfo.color;
				ctx.textAlign = 'left';
				ctx.font = fontbig;
				ctx.fillText(self.receiveData.certInfo.receive_user || '***',120,253);
				// ctx.fillStyle = self.receiveData.certInfo.color;
				// ctx.textAlign = 'left';
				// ctx.font = font;
				// ctx.fillText(self.receiveData.name || '*星跑者', 120, 70);
				// ctx.fillStyle = self.receiveData.certInfo.color;
				// ctx.textAlign = 'left';
				// ctx.font = font;
				// ctx.fillText('请继续加油!', 270, 70);
				ctx.fillStyle = self.receiveData.certInfo.color;
				ctx.textAlign = 'left';
				ctx.font = font;
				ctx.fillText(self.receiveData.certInfo.receive_time.split('-')[0] || '', 230, 443);
				ctx.fillStyle = self.receiveData.certInfo.color;
				ctx.textAlign = 'left';
				ctx.font = font;
				ctx.fillText(self.receiveData.certInfo.receive_time.split('-')[1] || '', 276, 443);
				ctx.fillStyle = self.receiveData.certInfo.color;
				ctx.textAlign = 'left';
				ctx.font = font;
				ctx.fillText(self.receiveData.certInfo.receive_time.split('-')[2] || '', 303, 443);
				
				
				
				// 渲染画布
				ctx.draw(false, (() => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							// canvas:self.itemclass,
							destWidth: self.canvasWidth * 2, //展示图片尺寸=画布尺寸1*像素比2
							destHeight: self.canvasHeight * 2,
							quality: 1,
							fileType: 'jpg',
							success: (res) => {
								var base64 = res.tempFilePath;
								//#ifdef MP-WEIXIN
								//检查更新
								base64 = uni.getFileSystemManager().readFileSync(res.tempFilePath, 'base64');
								//#endif
								console.log('通过画布绘制出的图片--保存的就是这个图', base64)
								uni.hideLoading();
								self.receiveCert(base64);
							},
							fail: function(error) {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: "提交失败", // res.tempFilePath
								})
								
							}
						}, self)

					}, 300)
				})())
			},
			clear() {
				let self = this;
				self.context.clearRect(0, 0, self.canvasWidth, self.canvasHeight);
				self.context.draw(true);
			},
			//查看图片
			receiveCert(url) {
				let self = this;
				self._post('user.user/receiveCert', {
					grade_id: self.receiveData.grade_id,
					source:'wx',
					iFile:url
				}, (res) => {
					self.imgs = res.data.path;
					self.canvasbool=false;
					self.getData();
					// uni.showToast({
					// 	icon: 'none',
					// 	position: 'bottom',
					// 	title: "提交成功",
					// })
				});
			},
		}
	}
</script>


<style lang="scss">
@import '../../../common/style.scss';
page {
	background-color: #fff;
}
.honor{
	.con{
		padding: 30rpx;
		.item{
			margin-bottom: 50rpx;
		}
		.img{
			width: 100%;
			height: 500rpx;
			background-color: #eee;
			width: 100%;
			margin-bottom: 30rpx;
		}
		.control{
			overflow: hidden;
			line-height: 70rpx;
			.name{
				font-size: 28rpx;
				float: left;
				width: 60%;
			}
			.btn{
				line-height: 70rpx;
			}
		}
	}
	.canvasprop{
		position: fixed;
		z-index: 100;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		padding: 30rpx;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.5);
		.con_in{
			top: 50%; 
			transform: translate(0,-50%);
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 10;
			background-color: #fff;
		}
		.con_img{
			position: relative;
			overflow: hidden;
		}
		.canvas{
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			z-index: 1;
		}
		.img{
			width: 100%;
			position: relative;
			z-index: 10;
		}
		.bottom{
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn{
				width: 45%;
			}
		}
	}
}
.empty{
	min-height: 500rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>